<template>
  <div class="inter-content" ref="scrollRef">
    <!-- 选择身份 -->
    <div class="inter-interue">
      <!-- 头像 -->
      <div class="inter-avatar">
        <img src="@img/menu/logo.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="inter-message">
        <p class="inter-title">您好，我是面试官“请填写您以什么身份来面试”</p>
        <div class="inter-list">
          <div
            class="inter-options"
            v-for="item in identityData"
            :key="item.id"
          >
            <input
              type="radio"
              :value="item.id"
              name="identity"
              @change="handleIdentity(item)"
            />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="inter-time" v-if="subLevelModelList.length">
          <div
            class="time-options"
            v-for="item in subLevelModelList"
            :key="item.id"
          >
            <input
              type="radio"
              :value="item.id"
              name="subLevelModel"
              @change="handleTime(item)"
            />
            <p>{{ item.years }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择行业 -->
    <div class="inter-interue" v-if="occupationData.length">
      <!-- 头像 -->
      <div class="inter-avatar">
        <img src="@img/menu/logo.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="inter-message occupation-message">
        <h4>好的!</h4>
        <p class="message-explain">
          您选择的身份是: {{ identityMessage }}{{ identityTime }}
        </p>
        <div class="warning">
          <p>请填写您面试的岗位，请问您面试什么岗位</p>
        </div>
        <div class="occupation-list">
          <div class="list-left">
            <div
              v-for="item in occupationData"
              :key="item.code"
              class="left-item"
            >
              <p
                @click="handleLeftClick(item)"
                :class="selectedLeftIndex == item.code ? 'leftActive' : ''"
              >
                {{ item.name }}
              </p>
            </div>
          </div>
          <div class="list-right">
            <div class="right-top">
              <div
                v-for="item in secondLevelMenu"
                :key="item.code"
                class="right-top-item"
              >
                <p
                  @click="handleRightTopClick(item)"
                  :class="
                    selectedRightTopIndex == item.code ? 'rightTopActive' : ''
                  "
                >
                  {{ item.name }}
                </p>
              </div>
            </div>
            <div class="right-bottom">
              <div
                v-for="item in thirdLevelMenu"
                :key="item.code"
                class="right-bottom-item"
              >
                <p
                  @click.stop="handleRightBottomClick(item)"
                  :class="
                    selectedRightBottomIndex == item.code
                      ? 'rightBottomActive'
                      : ''
                  "
                >
                  {{ item.name }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 确认岗位 -->
    <div
      class="inter-interue"
      v-if="subLevelName.length"
      ref="confirmIdentityRef"
    >
      <!-- 头像 -->
      <div class="inter-avatar">
        <img src="@img/menu/logo.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="inter-message inter-confirmIdentity">
        <h4>好的!</h4>
        <p class="info">
          确认信息: 您是 {{ identityMessage }}{{ identityTime }}，岗位是：{{
            subLevelName
          }}。面试公司职责为:
        </p>
        <div class="info-form">
          <div class="form-item">
            <label for="role">岗位职责:</label>
            <el-input
              id="role"
              autosize
              type="textarea"
              v-model="role"
              placeholder="请输入岗位职责"
            />
          </div>
          <div class="form-item job-item">
            <label for="job">任职要求:</label>
            <el-input
              id="job"
              autosize
              v-model="job"
              type="textarea"
              placeholder="请输入任职要求"
            />
          </div>
        </div>
        <div class="message-footer">
          <button @click="handleConfirmIdentity">
            请您仔细阅读，并确认信息，面试开始
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onBeforeMount } from "vue";
// api
import {
  identityList,
  type IIdentityItem,
  type IsubLevelModelItem,
  type IOccupationItem,
  occupationList,
  confirmIdentity,
  
} from "@api/chat";
// props
const props = defineProps({
  chatId: {
    type: String,
    default: "",
  },
});
// 生命周期
onBeforeMount(() => {
  getIdentityList();
});
// 身份信息
const identityData = ref<IIdentityItem[]>([]);
// 获取身份信息列表
const getIdentityList = async () => {
  const res = await identityList();
  if (res.code != 0) return;
  identityData.value = res.data;
};
// 工作时间列表
const subLevelModelList = ref<IsubLevelModelItem[]>([]);
// 身份信息
let identityMessage = ref("");
let identityTime = ref("");
// 切换身份
const handleIdentity = (item: IIdentityItem) => {
  subLevelModelList.value = item.subLevelModelList;
  identityTime.value = "";
  identityMessage.value = item.name;
  if (!item.subLevelModelList.length) {
    getOccupationList();
  }
};
// 切换工作时间
const handleTime = (item: IsubLevelModelItem) => {
  identityTime.value = item.years;
  getOccupationList();
};
// 行业信息列表
const occupationData = ref<IOccupationItem[]>([]);
let selectedLeftIndex = ref(0);
let selectedRightTopIndex = ref(0);
let selectedRightBottomIndex = ref(0);

// 职业信息
let subLevelName = ref("");
// 二级行业信息
const secondLevelMenu = ref([]);
// 三级行业信息
const thirdLevelMenu = ref([]);
// 获取行业信息
const getOccupationList = async () => {
  scrollToBottom();
  const res = await occupationList();
  if (res.code != 0) return;
  // 全部数据
  occupationData.value = res.data;
  // 一级菜单选中code
  selectedLeftIndex.value = res.data[0].code;
  // 二级菜单数据
  secondLevelMenu.value = res.data[0].subLevelModelList;
  // 二级菜单选中code
  selectedRightTopIndex.value = res.data[0].subLevelModelList[0].code;
  // 三级菜单数据
  thirdLevelMenu.value = res.data[0].subLevelModelList[0].subLevelModelList;
};
// 行业信息-左边
const handleLeftClick = (item) => {
  // 一级菜单选中code
  selectedLeftIndex.value = item.code;
  // 二级菜单数据
  secondLevelMenu.value = item.subLevelModelList;
  // 三级菜单数据
  thirdLevelMenu.value = item.subLevelModelList[0].subLevelModelList;
  // 二级菜单选中code
  selectedRightTopIndex.value = item.subLevelModelList[0].code;
};
// 行业信息-右上
const handleRightTopClick = (item) => {
  // 二级菜单选中code
  selectedRightTopIndex.value = item.code;
  // 三级菜单数据
  thirdLevelMenu.value = item.subLevelModelList;
};
// 行业信息-右下
const handleRightBottomClick = async (item) => {
  // 三级菜单选中code
  selectedRightBottomIndex.value = item.code;
  subLevelName.value = item.name;
  job.value = item.duty;
  role.value = item.duty;
  await nextTick();
  if (confirmIdentityRef.value) {
    scrollToBottom();
  }
};
let scrollRef = ref(null);
let confirmIdentityRef = ref(null);
// 滚动到底
const scrollToBottom = () => {
  nextTick(() => {
    if (scrollRef.value) {
      scrollRef.value.scrollTop = scrollRef.value?.scrollHeight;
    }
  });
};
// 岗位确认
let job = ref("");
let role = ref("");
import { useGlobalStore } from "@stores";
const userStore = useGlobalStore().userStore;
// emits
const emits = defineEmits(["update"]);
// 点击确认按钮
const handleConfirmIdentity = async () => {
  const res = await confirmIdentity({
    chatId: props.chatId,
    identity: identityMessage.value,
    userId: userStore.userInfo.userId,
    years: identityTime.value,
    post: selectedRightBottomIndex.value,
  });
  emits("update");
};
</script>

<style lang="scss" scoped>
.inter-content {
  flex: 1;
  padding: 34px;
  padding-top: 17px;
  overflow: auto;
  scroll-behavior: smooth;
  .inter-interue {
    display: flex;
    margin-top: 17px;
    overflow: auto;
    .inter-avatar {
      img {
        width: 28px;
        height: 28px;
      }
    }
    // 身份
    .inter-message {
      border-radius: 5px 5px 5px 5px;
      background: #ffffff;
      padding: 15px 7px;
      min-width: 303px;
      margin-left: 11px;

      p {
        font-size: 12px;
        color: #323232;
      }
      .inter-list {
        display: flex;
        flex: 1;
        margin-top: 17px;
        .inter-options {
          display: flex;
          flex: 1;
          input {
            accent-color: #c90000;
          }
          p {
            margin-left: 6px;
          }
        }
      }
      .inter-time {
        border: 1px dashed #a7a7a7;
        border-radius: 6px 6px 6px 6px;
        display: flex;
        margin-top: 13px;
        padding-left: 13px;
        .time-options {
          display: flex;
          align-items: center;
          flex: 1;
          height: 41px;
          p {
            margin-left: 6px;
          }
        }
        input {
          accent-color: #c90000;
        }
      }
    }
    // 行业
    .occupation-message {
      h4,
      p {
        font-size: 12px;
        color: #323232;
      }
      .message-explain {
        margin-top: 10px;
        font-weight: 600;
      }
      .warning {
        background: #fff7f7;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #c90000;
        margin-top: 11px;
        height: 26px;
        display: flex;
        align-items: center;
        padding-left: 6px;
        p {
          color: #c90000;
          margin: 0;
        }
      }
      .occupation-list {
        margin-top: 8px;
        border-radius: 5px;
        border: 1px solid #dbdbdb;
        display: flex;
        min-width: 705px;
        // 左边
        .list-left {
          width: 130px;
          border-right: 1px solid #dbdbdb;
          margin: 15px;
          padding-right: 15px;
          padding-top: 15px;
          .left-item {
            color: #323232;

            text-align: center;
            font-size: 12px;
            cursor: pointer;
            p {
              padding: 12px 0;
            }
          }
          .leftActive {
            background: #f8f8fa;
            border-radius: 1px 5px 5px 1px;
            color: #c90000;
            font-weight: 600;
          }
        }
        // 右边
        .list-right {
          flex: 1;
          padding: 0 12px;
          padding-bottom: 12px;
          .right-top {
            display: flex;
            &-item {
              width: 25%;
              height: 50px;
              line-height: 50px;
              text-align: center;
              font-size: 12px;
              color: #323232;
              display: flex;
              justify-content: center;

              p {
                cursor: pointer;
              }
            }
            .rightTopActive {
              color: #c90000;
            }
          }
          .right-bottom {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            border: 1px dashed #a7a7a7;

            &-item {
              width: 25%;
              text-align: center;
              font-size: 12px;
              color: #323232;
              min-width: 100px;
              height: 50px;
              line-height: 50px;
              display: flex;
              justify-content: center;
              p {
                cursor: pointer;
              }
            }
            .rightBottomActive {
              color: #c90000;
            }
          }
        }
      }
    }
    // 确认岗位
    .inter-confirmIdentity {
      width: 100%;
      // overflow: auto;
      .info {
        margin-top: 10px;
        font-weight: 600;
      }
      .info-form {
        width: 100%;
        margin-top: 17px;
        border: 1px solid #dbdbdb;
        background-color: #f8f8fa;
        padding: 10px;
        box-sizing: border-box;
        font-size: 12px;
        .el-textarea {
          margin-top: 10px;
          font-size: 12px;
        }
        label {
          font-weight: 600;
        }
        .job-item {
          margin-top: 20px;
        }
      }
      // 按钮
      .message-footer {
        text-align: center;
        margin-top: 20px;
        button {
          background-color: #c90000;
          color: #fff;
          cursor: pointer;
          padding: 8px 15px;
          border-radius: 4px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
